<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生住宿管理系统前台</title>
    <link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <script src="../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
    <!--导入jQuery库 -->
    <script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
    <!--导入layUI库 -->
    <script src="../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
    <!--导入cookie库 -->
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}" media="all">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <!--导入公共的css，其中可定义整个网页的配色方案 -->
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
</head>

<body>
<div>
    <ul class="layui-nav" lay-filter="" style="position: fixed;top:0;left: 0;right: 0;z-index: 1000;">
        <li class="layui-nav-item"><a href="" id="hover_div" style="font-size:large">&nbsp;学生住宿管理系统</a></li>
        <li class="layui-nav-item layui-layout-right" style="margin-right: 100px;">
            <a href="javascript:void(0)">
                <img src="../../static/images/default.ico"
                     th:src="${(session.currentUser==null||session.currentUser.avatar==null||session.currentUser.avatar=='')?'/images/avatar.jpg':session.currentUser.avatar}"
                     class="layui-nav-img" alt="">
                <span th:text="${session.currentUser==null?'未登录':(session.currentUser.username==null?'':session.currentUser.username)}">用户名</span>
            </a>
            <dl class="layui-nav-child">
                <dd><a href="" th:href="@{/user}">个人中心</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-layout-right"><a href="/logout">安全退出</a></li>
    </ul>
</div>

<div style="padding-top:65px;width: 94%;height:80%; margin:auto">
    <!-- 面包屑-->
    <form th:if="${session.currentUser!=null}" class="layui-form layui-form-pane" action="#" th:object="${session.currentUser}"
          th:action="@{/user/update-info}">
        <div class="layui-form-item" style="height: 0">
            <div class="layui-input-block">
                <input name="id" th:value="*{id}" type="hidden" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" value="" lay-verify="required"
                       lay-reqtext="密码不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" th:value="*{phone}" lay-verify="required|phone"
                       lay-reqtext="联系方式不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">通信地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" th:value="*{address}" lay-verify="required"
                       lay-reqtext="通信地址不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="genderStr" value="男" title="男"
                       th:checked="*{gender==null}?'true':*{gender.value=='男'}"
                       checked="">
                <input type="radio" name="genderStr" value="女" title="女"
                       th:checked="*{gender==null}?'false':*{gender.value=='女'}">
            </div>
        </div>
        <div class="layui-upload-list">
            <img class="layui-upload-img" src="" alt="" id="pic" style="width: 180px;height: 180px">
            <p id="uploadAgain"></p>
            <p id="uploadMsg"></p>
            <input type="hidden" id="pic_v" name="avatar" th:value="*{avatar}">
        </div>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal avatar-upload-btn-1" id="uploadAvatarBtn">
                上传头像
            </button>
            <button type="reset" class="layui-btn layui-btn-primary avatar-upload-btn-2">重置</button>
            <button type="submit" class="layui-btn avatar-upload-btn-3" lay-submit="" lay-filter="save">保存
            </button>
        </div>
    </form>
</div>

<div class="layui-footer" id="sdms-footer"></div>
<script src="../static/js/footer.js" th:src="@{/js/footer.js}"></script>
<script src="../static/js/upload.js" th:src="@{/js/upload.js}"></script>
<!-- layUI执行脚本 -->
<script>
    //JavaScript代码区域
    layui.use(['element', 'form', 'upload'], function () {
        var $ = layui.$;
        var upload = layui.upload;
        var avatar = $("#pic_v").val();
        if (avatar != null && avatar !== "") {
            $("#pic").attr("src", avatar)
        } else {
            $("#pic").attr("src", "/images/no-avatar.png")
        }
        //图片上传的逻辑
        var uploadInst = upload.render({
            elem: '#uploadAvatarBtn',
            url: pictureUploadURL, //改成您自己的文件上传接口
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#pic').attr('src', result); //图片链接(base64)
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败, ' + res.msg);
                } else {
                    //上传成功
                    $("#pic_v").val(res.data[0].pictureURL);
                    $("#pic").attr("src", res.data[0].pictureURL);
                }
            },
            error: function () {
                //失败状态要实现重传
                var uploadAgain = $('#uploadAgain');
                uploadAgain.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                uploadAgain.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>

</body>

</html>